<template>
	<view class="">
		<view class="pl-20 pr-20 bg-white">
			<u-tabs
				:list="subsectionList" 
				:current="curNow" 
				:scrollable="false"
				keyName="label" 
				lineWidth="34"
				lineColor="#e54d42"
				:activeStyle="{color: '#e54d42'}"
				@click="sectionChange" 
			/>
		</view>
		<view class="my-list">
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(item, index) in dataList" :key="index" >
					<view class="item" @click="$u.route('/pages/shop/Reservation/detailed', {id: item.orderId})">
						<view class="flex justify-between align-center fsize-28">
							<view class="flex align-center">
								<u-avatar :src="item.avatarImage || '/static/logo.png'" size="26"/>
								<view class="ml-10 line-gray">
									<view>{{item.storeName}}</view>
									<view>{{item.userName}}</view>
								</view>
							</view>
							<text>{{item.statusText}}</text>
						</view>
						<view class="pb-20 border-t border-b mt-20 mb-20">
							<view class="flex mt-20" v-for="project in item.items" :key="project.id">
								<view class="shink0">
									<u-avatar shape="square" :src="project.projectImage || '/static/logo.png'" size="50"/>
								</view>
								<view class="w-100 ml-20 flex flex--row justify-between">
									<text>{{project.projectName}}</text>
									<text class="fsize-28 line-blue">{{project.appointmentTime}}</text>
								</view>
								<view class="shink0 line-red">
									<text class="fsize-24">￥</text>
									<text>{{project.price}}</text>
								</view>
							</view>
						</view>
						<view class="flex justify-between align-center">
							<text class="line-gray fsize-28">{{item.dateTime}}</text>
							<view v-if="item.status===5">
								<u-tag 
									bgColor="#e54d42" 
									borderColor="#e54d42" 
									color="#fff" 
									text="确认服务" 
									shape="circle" 
									@click.stop="confirmRs(item.id, index)"
								/>
							</view>
							
						</view>
					</view>
				</u-list-item>
				<u-loadmore 
					:status="loadmore.status" 
					:icon-type="loadmore.iconType" 
					:load-text="loadmore.loadText.loadText" 
					margin-top="20"
					margin-bottom="20" 
				/>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length === 0">
			<u-empty icon-size="150" text="暂无卡项列表" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				showQrc: false,
				subsectionList: [
					{ label: '全部', value: 0 }, 
					{ label: '待付款', value: 6 }, 
					{ label: '待服务', value: 5 },
					{ label: '已完结', value: 9 },
				],
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				curNow: 0,
				dataList: [],
				searchData: {
					staffId: 0,
					orderType: 11,
					status: 0,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad() {
			this.searchData.staffId = this.userInfo.userId
			this.getPageList()
		},
		computed: { ...mapState(['userInfo']) },
		methods: {
			confirmRs(id, ix){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认该服务项目已完成?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('ConfirmAppointment', { id: id }).then(res=>{
								that.dataList[ix].status = 9
								that.dataList[ix].statusText = '已完结'
							})
						}
					}
				})
			},
			sectionChange(e) {
				if (this.curNow === e.index) return
				this.curNow = e.index
				this.searchData.status = e.value
				this.searchData.page = 1
				this.dataList = []
				this.getPageList()
			},
			getPageList() {
				this.$reqPost('GetAppointmentList', this.searchData).then(res => {
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList()
				}
			}
		}
	}
</script>

